<script setup lang="ts">
import InvoiceRecord from './invoice-record.vue'
import InvoiceTitle from './invoice-title.vue'

const activeName = ref<'invoiceRecord' | 'invoiceTitle'>('invoiceRecord')
const childRefs = ref([])
const tabsData = [
    {
        component: InvoiceRecord,
        label: '开票记录',
        name: 'invoiceRecord',
    },
    {
        component: InvoiceTitle,
        label: '发票信息(抬头)',
        name: 'invoiceTitle',
    },
]

// #region UI Listener
function onTabChange(_name: string) {

}
// #endregion
</script>

<template>
    <el-tabs v-model="activeName"
             class="h-[calc(100vh-162px)]"
             @tab-change="onTabChange"
    >
        <el-tab-pane v-for="(item) in tabsData"
                     :key="item.name"
                     :label="item.label"
                     :name="item.name"
                     class="h-full overflow-x-hidden overflow-y-auto"
        >
            <component :is="item.component"
                       ref="childRefs"
            />
        </el-tab-pane>
    </el-tabs>
</template>

<style scoped lang="scss">
:deep(.el-tabs__content) {
    height: calc(100% - 55px);
}
</style>
